<template>
	<div class="coupon-list table-theme">
		<head-title title="营销--优惠券列表"></head-title>
		<el-card>
			<div class="top-menu">
				<div class="menu-left">
					<select-view
						:option-list="statusList"
						:value="status"
						placeholder="类型"
						type="status"
						@value="setSelectValue"
					>
					</select-view>
					<select-view
						:option-list="useScenariosList"
						:value="use_scenarios"
						placeholder="使用场景"
						type="use_scenarios"
						@value="setSelectValue"
					>
					</select-view>
					<select-view
						:option-list="customizedTypeList"
						:value="customized_type"
						placeholder="定制类型"
						type="customized_type"
						@value="setSelectValue"
					>
					</select-view>
					<select-view
						:option-list="typeList"
						:value="style"
						placeholder="优惠券类型"
						type="style"
						@value="setSelectValue"
					>
					</select-view>
				</div>

				<div class="menu-right">
					<refresh-button @refresh="refreshPage"></refresh-button>
					<div class="btn-group">
						<div class="btn-item">
							<el-button type="primary" size="small" @click="issueCoupons">发放优惠券</el-button>
						</div>
						<div class="add btn-item">
							<el-button type="primary" size="small" @click="data(1)">添加优惠券</el-button>
						</div>
					</div>
				</div>
			</div>

			<p class="data-number">总数据数：{{total}}</p>
			<el-table :data="couponList" border @selection-change="handleSelectionChange">
				<el-table-column type="selection" width="55"></el-table-column>
				<el-table-column label="序号" align="center" prop="coupon_id"></el-table-column>
				<el-table-column label="店铺id" align="center" prop="store_id"></el-table-column>
				<el-table-column label="店铺名称" align="center" prop="store_name"></el-table-column>
				<el-table-column label="优惠券名称" align="center" prop="coupon_name"></el-table-column>
				<el-table-column label="满减金额" align="center" prop="satisfy_money"></el-table-column>
				<el-table-column label="优惠券金额" align="center" prop="money"></el-table-column>
				<el-table-column label="获取途径" align="center" prop="style_name"></el-table-column>
				<el-table-column label="图片" align="center" width="80">
					<template slot-scope="scope">
						<ImgPopover :src="scope.row.icon"></ImgPopover>
					</template>
				</el-table-column>
				<el-table-column label="优惠券类型" align="center" prop="typeName"></el-table-column>
				<el-table-column label="折扣" align="center" prop="discount"></el-table-column>
				<el-table-column label="时间" align="center" prop="add_time"></el-table-column>
				<el-table-column label="B端/C端" align="center" prop="useTypeName"></el-table-column>
				<el-table-column label="上下架" align="center" width="180">
					<template slot-scope="scope">
						<el-switch v-model="scope.row.status" :active-value="1" :inactive-value="2" @change="upDown($event, scope.row.coupon_id)"></el-switch>
					</template>
				</el-table-column>
				<el-table-column label="添加时间" align="center" prop="add_time"></el-table-column>
				<el-table-column label="操作" align="center" width="150">
					<template slot-scope="scope">
						<el-button type="primary" size="mini" @click="data(0, scope.row.coupon_id)">修改</el-button>
						<el-button type="danger" size="mini" @click="del(scope.row.coupon_id)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
			<div class="pages">
				<el-pagination background layout="prev, pager, next, jumper" :total="total" @current-change="init" :current-page="page"></el-pagination>
			</div>
		</el-card>

		<!-- 发券弹框 -->
		<el-dialog title="发券" :visible.sync="couponDialog" center :modal-append-to-body="false" width="680px">
			<el-form :model="couponForm" :rules="couponFormRules" ref="couponForm" label-width="120px">
				<el-form-item label="用户id:" prop="user_id">
					<el-input placeholder="请输入用户id" v-model="couponForm.user_id"></el-input>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="couponDialog = false">取 消</el-button>
				<el-button type="primary" @click="confirmClick('couponForm')">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
	import ImgPopover from '@/components/ImgPopover';
	import SelectView from "@/components/SelectView";
	export default {
		components: {
			ImgPopover,
			SelectView
		},
		data() {
			return {
				couponDialog: false,
				couponForm: {
					coupon_ids: [],
					user_id: ''
				},
				couponFormRules: {
					user_id: [{
						required: true,
						message: '请输入用户id'
					}]
				},
				multipleSelection: [],
				couponList: [],
				total: 0,
				totalData: 0,
				status: 1,
				client: '',
				statusList: [{
						value: 1,
						label: '上架'
					},
					{
						value: 2,
						label: '下架'
					}
				],
				useScenariosList: [{
						value: 0,
						label: '线上'
					},
					{
						value: 1,
						label: '线下'
					}
				],
				customizedTypeList: [{
						value: 0,
						label: '家具大师'
					},
					{
						value: 1,
						label: '家配大师'
					}
				],
				typeList:[
					{
						value:1,
						label:"新用户赠送"
					},
					{
						value:2,
						label:"活动"
					},
					{
						value:3,
						label:"买会员送"
					},
					{
						value:4,
						label:"续费"
					},
					{
						vlaue:5,
						label:"赠送"
					}
				],
				page: 0,
				use_scenarios:0,
				customized_type:0,
				style:""
			};
		},
		methods: {
			// 初始化列表
			init(e) {
				this.page = e;
				let data = {
					page: e - 1 ? e - 1 : 0,
					limit: 10,
					status: this.status,
					customized_type:this.customized_type,
					use_scenarios:this.use_scenarios,
					style:this.style
				};
				this.$http(this.$ApiList.CardList, data).then(res => {
					this.couponList = res.datas.data;
					this.total = res.datas.count;
				});
			},
			// 上下架
			upDown(e, coupon_id) {
				let data = {
					status: e,
					coupon_id: coupon_id
				};
				//console.log(data)
				this.$http(this.$ApiList.CardDown, data).then(res => {
					this.$layer.msg('操作成功');
				});
			},
			// 删除
			del(coupon_id) {
				this.$confirm('确定删除吗?', '提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					})
					.then(() => {
						let data = {
							coupon_id: coupon_id
						};
						this.$http(this.$ApiList.CardDel, data).then(res => {
							this.$layer.msg('删除成功');
							this.page = 1;
							this.init();
						});
					})
					.catch(() => {});
			},
			// 修改或添加
			data(isAdd, id) {
				if (isAdd == 1) {
					this.$router.push({
						path: '/coupon_data',
						query: {
							isAdd: isAdd
						}
					});
				} else {
					this.$router.push({
						path: '/coupon_data',
						query: {
							isAdd: isAdd,
							id: id
						}
					});
				}
			},
			handleSelectionChange(val) {
				this.multipleSelection = val;
			},
			issueCoupons() {
				this.couponForm.coupon_ids = '';
				console.log(this.multipleSelection);
				if (this.multipleSelection.length == 0) {
					this.$message.error('至少要选择一张优惠券');
					return;
				}
				this.couponDialog = true;

				this.multipleSelection.forEach(item => {
					this.couponForm.coupon_ids += item.coupon_id + ',';
				});
				this.couponForm.coupon_ids = this.couponForm.coupon_ids.substr(0, this.couponForm.coupon_ids.length - 1);
				console.log(this.couponForm);
			},
			//提交
			confirmClick(formName) {
				this.$refs[formName].validate(valid => {
					if (valid) {
						this.$http(this.$ApiList.CardReceive, this.couponForm).then(res => {
							this.$layer.msg('发放成功');
							this.couponDialog = false;
							this.init();
						});
					} else {
						this.$layer.msg('请填写完整信息后提交');
					}
				});
			},
			refreshPage() {
				this.page = 1;
				this.init();
			},
			setSelectValue(obj){
				const{ type,value } = obj
				switch (type) {
					case 'status':
						this.status = value
						break;
					case 'use_scenarios':
						this.use_scenarios = value
						break;
					case 'customized_type':
						this.customized_type = value
						break;
					case 'style':
						this.style = value
						break;
					default:
						break;
				}
				this.init()
			}
		},
		created() {
			this.init();
		}
	};
</script>
<style scoped="scoped" lang="scss">
	.coupon-list {
		.btn-group {
			display: flex;
			margin-top: 5px;
		}

		.btn-group .btn-item {
			margin-right: 10px;
		}
	}
</style>
